<template>
  <!--查看单个订单弹框中的订单商品列表组件  -->
  <div class="table-box" ref="table_box">
    <a-table
      size="middle"
      :columns="columns"
      :data-source="tableData"
      :pagination="pagination"
      :row-selection="selectionOpt"
      :loading="loading"
      @change="handleTableChange"
      :scroll="scroll"
    >
      <template slot="column" slot-scope="text, record, index">
        <a @click="onTouchCell($event, text, record, index)">{{ text }}</a>
      </template>
      <template slot="action" slot-scope="text, record, index">
        <!-- <span 
                  v-for="(item,ind) in text" 
                  :key="ind">
                  <a @click="onAction($event,item,record,index)">{{item}}</a>
                  <a-divider v-if="ind<text.length-1" type="vertical" />
                </span> -->
        <a-tag style="margin: 2px" v-for="(item, ind) in text" :key="ind" color="geekblue">
          <a style="color: #1890ff" @click="onAction($event, item, record, index)">{{ item }}</a>
        </a-tag>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
    },
    tableData: {
      type: Array,
    },
    pagination: {
      type: Object,
    },
    isSelecttion: {
      type: Boolean,
      default: false,
    },
    loading:{
        type:Boolean
    },
    scroll:{
      type:Object,
      default:()=>{return { x:false, y: true }}
    }
  },
  data() {
    return {
      scrollY:'',
      scrolls:{  y: 290 }
    }
  },
  mounted(){
    this.scrollY=this.$refs.table_box.style
    console.log(this.$refs.table_box.clientHeight);
  },
  computed: {
    selectionOpt() {
      if (this.isSelecttion) {
        return {
          //多选操作
          onChange: (selectedRowKeys, selectedRows)=>{
            console.log("多选操作onChange",`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
            this.$emit("onselectChange",selectedRowKeys, selectedRows)
          },
          onSelect: (record, selected, selectedRows) => {
            console.log("多选操作onSelect",record, selected, selectedRows)
            this.$emit("onSelect",record, selected, selectedRows)
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            console.log("多选操作onSelectAll",selected, selectedRows, changeRows)
            this.$emit("onSelectAll",selected, selectedRows, changeRows)
          },
        }
      } else {
        return undefined
      }
    },
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      console.log('触发改变页码,筛选,排序时的回调', pagination)
      this.$emit("onTableChange",pagination, filters, sorter)
    },
    onTouchCell(event, text, record, index) {
      console.log('点击单元格中的内容', event, text, record, index)
      this.$emit("onTouchCell",text, record, index)
    },
    onAction(event, text, record, index) {
      console.log('点击list中的操作按钮', event, text, record, index)
      this.$emit("onAction",text, record, index)
    },
  },
}
</script>

<style  scoped>
.table-box{
  width: 100%;
}
.ant-table td { 
  text-align: justify;
text-justify: newspaper;
word-break: break-all;
}
</style>